<template>
	<view class="">
		<NavBar :title="orderDetail.orderStatus" :isShowLeftBtn="true">
		</NavBar>
	</view>
	<view class="content" :style="{minHeight:contentHeight}" v-if="isPageShow">
		<view class="main">
			<view class="main_sec m_b_90">
				<view class="m_b_42" style="text-align: center;">
					<text class="f_30_0_b">
						{{orderDetail.orderStatus}}
					</text>
				</view>
				<view class="m_b_12">
					<view class="" style="width: 620rpx;">
						<text class="f_26_0 u-line-1">
							订单编号：{{orderDetail.order_no}}
						</text>
					</view>
					<view class="" style="width: 620rpx;">
						<text class="f_26_0">
							送货地址：{{orderDetail.delivery_address}}
						</text>
					</view>
					<view class="" style="width: 620rpx;">
						<text class="f_26_0 u-line-1">
							收货联系人：{{orderDetail.contact_name}}
						</text>
					</view>
					<view class="" style="width: 620rpx;">
						<text class="f_26_0 u-line-1">
							联系电话：{{orderDetail.contact_phone}}
						</text>
					</view>
				</view>
				<view class="sec_detail m_b_20">
					<view class="flex_both">
						<view class="" style="width: 250rpx;">
							<text class="f_26_0 u-line-1">
								采购总价：{{orderDetail.caigou_price}}
							</text>
						</view>
						<view class="" style="width: 350rpx;" @click="onClickCgMx">
							<text class="f_26_0 u-line-1">
								采购订单明细：(点击查看明细)
							</text>
						</view>
					</view>
					<view class="" v-if="cgShow">
						<view class="m_t_10 m_b_10">
							<text class="f_26_0" style="font-weight: bold;font-size: 25rpx;">
								采购订单明细：
							</text>
						</view>
						<view class="m_b_20 flex_both" v-for="(item,index) in orderDetail.goods" :key="index"
							style="align-items: flex-start;">
							<view style="width: 500rpx;">
								<view class="flex_both">
									<view class="" style="width: 250rpx; flex-shrink: 0;">
										<text class="f_26_0 u-line-1">
											名称：{{item.name}}
										</text>
									</view>
									<view class="" style="width: 250rpx; flex-shrink: 0;">
										<text class="f_26_0">
											型号：{{item.model}}
										</text>
									</view>
								</view>
								<view class="flex_both">
									<view class="" style="width: 250rpx; flex-shrink: 0;">
										<text class="f_26_0 u-line-1">
											单价：{{item.price_ask}}
										</text>
									</view>
									<view class="" style="width: 250rpx; flex-shrink: 0;">
										<text class="f_26_0 u-line-1">
											数量：{{item.num}}
										</text>
									</view>
								</view>
								<view class="" style="width: 480rpx;">
									<text class="f_26_0 ">
										技术参数：{{item.desc}}
									</text>
								</view>
								<view class="" style="width: 480rpx;">
									<text class="f_26_0  ">
										总价：{{ parseInt(item.price_ask)*parseFloat(item.num)}}
									</text>
								</view>
							</view>
							<view>
								<view class="m_r_10" style="width: 200rpx; flex-shrink: 0;">
									<up-image :show-loading="true" :src="item.images" width="120rpx" height="120rpx"
										radius="5" @click="previewImage(item.images,index)"></up-image>
								</view>
								<!-- 				<view class="m_b_10 m_r_10" v-for="(ima,index) in item.images"
									:key="index">
									<up-image :src=" item.images" width="190rpx" height="174rpx" radius="5"
										@click="previewImage(item.images,index)"></up-image>
								</view> -->
							</view>
						</view>
					</view>
					<!-- <view class="flex_both">
						<view class="" style="width: 250rpx;">
							<text class="f_26_0 u-line-1">
								订单毛利：{{orderDetail.maoli}}
							</text>
						</view>
						<view class="" style="width: 350rpx;">
							<text class="f_26_0 u-line-1">
								业务费用：{{orderDetail.yewu_fee}}
							</text>
						</view>
					</view> -->
				</view>
				<view class="m_b_16">
					<!-- <view class="" style="width: 620rpx;">
						<text class="f_26_0 u-line-1">
							订单总价：{{orderDetail.total_price}}
						</text>
					</view> -->
					<view class="" style="width: 620rpx;">
						<text class="f_26_0 u-line-1">
							询价总额：{{orderDetail.caigou_price}}
						</text>
					</view>
					<view class="" style="width: 620rpx;" v-if="orderDetail.order_status>90">
						<text class="f_26_0 u-line-1">
							快递公司：{{orderDetail.express_company}}
						</text>
					</view>
					<view class="" style="width: 620rpx;" v-if="orderDetail.order_status>90">
						<text class="f_26_0">
							快递单号：{{orderDetail.courier_number}}
						</text>
					</view>
				</view>
				<view class="hr m_t_20 m_b_14">

				</view>
				<view class="">
					<text class="f_26_0" style="color: #8C8E91;" v-if="orderDetail.orderStatus == '订单完成'">
						{{orderDetail.orderStatus}}
					</text>
					<text class="f_26_0" style="color: #FD1122;" v-else>
						{{orderDetail.orderStatus}}
					</text>
				</view>
				<view class="">
					<text class="f_26_0" style="color: #8C8E91;">
						下单日期：{{orderDetail.create_time}}
					</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { ref, reactive, getCurrentInstance } from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import NavBar from "@/components/navbar.vue"
	const { proxy } = getCurrentInstance()
	const contentHeight = ref('100vh')
	const statusBarHeight = ref(88)
	const oId = ref()
	const isPageShow = ref(false)
	onLoad((e) => {
		uni.getSystemInfo({
			success: function (info) {
				statusBarHeight.value = (info.statusBarHeight + 44) * 2
				contentHeight.value = `calc(100vh - ${statusBarHeight.value + 100}rpx)`
			}
		});
		oId.value = e.id
		getOrderDetail()
	})
	const orderDetail = ref({ orderStatus: '' })
	const getOrderDetail = async () => {
		let res = await proxy.$http('salesMan.getOrderDetail', { order_id: oId.value })
		if (res.code == 1) {
			orderDetail.value = res.data
			isPageShow.value = true
		}
	}
	// 销售明细展示
	const xsShow = ref(false)
	const onClickXsMx = () => {
		if (xsShow.value) {
			xsShow.value = false
		} else {
			xsShow.value = true
		}
	}
	// 采购明细展示
	const cgShow = ref(false)
	const onClickCgMx = () => {
		if (cgShow.value) {
			cgShow.value = false
		} else {
			cgShow.value = true
		}
	}
	const previewImage = (e, index) => {
		uni.previewImage({
			urls: [e], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
			current: index, // 当前显示图片的http链接，默认是第一个
			success: function (res) { },
			fail: function (res) { },
			complete: function (res) { },
		})
	};
</script>
<style lang="scss" scoped>
	.content {
		background: #F2F2F2;
		padding: 32rpx 20rpx;
		padding-bottom: 64rpx;

		.main {
			.main_sec {
				width: 654rpx;
				padding: 28rpx;
				padding-top: 40rpx;
				background: #FFFFFF;
				box-shadow: 2rpx 6rpx 5rpx 0rpx rgba(197, 197, 197, 0.29);
				border-radius: 10rpx;
				border: 1px solid #EDEDEE;

				.sec_detail {
					width: 626rpx;
					padding: 20rpx;
					background: #F6F8FE;
					border-radius: 5rpx;
				}
			}
		}

	}

	.form_box {
		.form_input {
			width: 564rpx;
			height: 80rpx;
			padding: 0 22rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			border: 1px solid #EDEDEE;
			display: flex;
			align-items: center;
		}
	}
</style>